import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtNoticebar } from 'taro-ui'

import './index.less'

class SaleRecord extends Taro.Component {
  config = {
    navigationBarTitleText: '结算记录'
  }

  state = {
    current: 0
  }

  handleClick(value) {
    this.setState({
      current: value
    })
  }

  render() {
    const tabList = [{ title: '待结算' }, { title: '已结算' }]
    const { current } = this.state

    return (
      <AtTabs
        current={ current }
        tabList={ tabList }
        onClick={ this.handleClick.bind(this) }
      >
        <AtTabsPane current={ current } index={ 0 }>
          <AtNoticebar close>结算说明：结算记录主要针对代理商的会员在系统中自主线上支付，总部在每月15号，线下打款结算给代理商，这里仅做记录。</AtNoticebar>
          <View className="sale-record">
            <View className="date">
              <View>
                <Text>2020年5月</Text>
                <Text>8640</Text>
              </View>
              <Text>6月15结算</Text>
            </View>
            <View className="list">
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
            </View>
          </View>
          <View className="sale-record">
            <View className="date">
              <View>
                <Text>2020年5月</Text>
                <Text>8640</Text>
              </View>
              <Text>6月15结算</Text>
            </View>
            <View className="list">
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={ current } index={ 1 }>
          <View className="sale-total">
            <Text>已累计结算</Text>
            <Text>12345</Text>
          </View>
          <View className="sale-record">
            <View className="date">
              <View>
                <Text>2020年5月</Text>
                <Text>8640</Text>
              </View>
              <Text>6月15结算</Text>
            </View>
            <View className="list">
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
            </View>
          </View>
          <View className="sale-record">
            <View className="date">
              <View>
                <Text>2020年5月</Text>
                <Text>8640</Text>
              </View>
              <Text>6月15结算</Text>
            </View>
            <View className="list">
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
              <View className="item">
                <View>
                  <Text>希朗AI课堂1年会员</Text>
                  <Text>+2880</Text>
                </View>
                <Text>订单编号：2020004413223495345</Text>
                <Text>下单时间：05-02 00:45</Text>
              </View>
            </View>
          </View>
        </AtTabsPane>
      </AtTabs>
    )
  }
}

export default SaleRecord